<template>
		<div>
			<a-form :label-col="{ md: { span: 7 }, sm: { span: 4 }, xs: { span: 24 } }"
				:wrapper-col="{ md: { span: 17 }, sm: { span: 20 }, xs: { span: 24 } }">
				<a-row :gutter="24">
					<a-col :md="24" :sm="24" :xs="24">
						<a-row>
							<a-col :md="8" :sm="8" :xs="8">
								<a-form-item label="本司货品" :colon="false">
									<a-radio-group v-model:value="form.original_type">
										<a-radio value="1">是</a-radio>
										<a-radio value="2">否</a-radio>
									</a-radio-group>
								</a-form-item>
							</a-col>
							<a-col :md="8" :sm="8" :xs="8">
								<a-form-item label="换购方式" :colon="false">
									<a-radio-group v-model:value="form.retail_type">
										<a-radio value="1">按件</a-radio>
										<a-radio value="2">按克</a-radio>
									</a-radio-group>
								</a-form-item>
							</a-col>
						</a-row>
					</a-col>
					<a-col :md="24" :sm="24" :xs="24">
						<div class="kd-solid">
							<div class="flex">
								<!-- 左侧-->
								<div class="flex1">
									<div class="flex align-center">
										<div class="kd_left">图片</div>
										<div class="kd_right flex align-center">
											<a-image :width="30" :height="30" />
										</div>
									</div>
									<div class="flex align-center">
										<div class="kd_left required">原条码</div>
										<div class="kd_right flex1">
											<a-input class="kd_inp" v-model:value="form.bar_code" :min="1" all-clear placeholder="请输入" />
										</div>
										<a-button size="middle" type="primary" class="margin-right-15" @click="search()">确定</a-button>
									</div>
									<div class="flex align-center">
										<div class="kd_left required">金料类型</div>
										<div class="kd_right">{{ form.gold_category_code_name || '' }}</div>
									</div>
									<div class="flex align-center">
										<div class="kd_left required">小类</div>
										<div class="kd_right">{{ form.subclass_code_name || '' }}</div>
									</div>
									<div class="flex align-center">
										<div class="kd_left required">成色</div>
										<div class="kd_right">{{ form.quality_code_name || '' }}</div>
									</div>
									<div class="flex align-center">
										<div class="kd_left required">宝石类型</div>
										<div class="kd_right">{{ form.gem_category_name || '' }}</div>
									</div>
									<div class="flex align-center">
										<div class="kd_left required">品类</div>
										<div class="kd_right">{{ form.classes_name || '' }}</div>
									</div>
									<div class="flex align-center">
										<div class="kd_left required">货品名称</div>
										<div class="kd_right">{{ form.name || '' }}</div>
									</div>
									<div class="flex align-center">
										<div class="kd_left required">数量</div>
										<div class="kd_right">{{ form.num || '' }}</div>
									</div>
									<div class="flex align-center">
										<div class="kd_left">原金重</div>
										<div class="kd_right">{{ form.gold_weight_old || '' }}</div>
									</div>
									<div class="flex align-center">
										<div class="kd_left required">现金重</div>
										<div class="kd_right flex1">
											<a-input type="number" class="kd_inp" :min="1"
												v-model:value="form.gold_weight" all-clear placeholder="请输入" />
										</div>
										<span class="kd_right_text">g</span>
									</div>
									<div class="flex align-center">
										<div class="kd_left">货重</div>
										<div class="kd_right flex1">
											<a-input type="number" class="kd_inp" :min="1"
												v-model:value="form.piece_weight" all-clear placeholder="请输入" />
										</div>
										<span class="kd_right_text">g</span>
									</div>
									<div class="flex align-center">
										<div class="kd_left">货品成色</div>
										<div class="kd_right flex1">
											<a-input type="number" class="kd_inp" :min="1"
												v-model:value="form.real_quality" all-clear placeholder="请输入" @change="changeW" />
										</div>
										<span class="kd_right_text">%</span>
									</div>
									<div class="flex align-center">
										<div class="kd_left">折足重</div>
										<div class="kd_right flex1">
											<a-input type="number" class="kd_inp" :min="1"
												v-model:value="form.lumping_weight" all-clear placeholder="请输入" />
										</div>
										<span class="kd_right_text">g</span>
									</div>
								</div>
								<!-- 右侧 -->
								<div class="flex1">
									<div class="flex align-center">
										<div class="kd_left">标签价</div>
										<div class="kd_right flex1">
											<a-input type="number" class="kd_inp"
												v-model:value="form.sticker_price" all-clear placeholder="请输入" />
										</div>
										<span class="kd_right_text">元</span>
									</div>
									<div class="flex align-center">
										<div class="kd_left">实售价</div>
										<div class="kd_right flex1">
											<a-input type="number" class="kd_inp"
												v-model:value="form.real_amount" all-clear placeholder="请输入" />
										</div>
										<span class="kd_right_text">元</span>
									</div>
									<div class="flex align-center">
										<div class="kd_left required">主石重量</div>
										<div class="kd_right flex1">
											<a-input type="number" class="kd_inp"
												v-model:value="form.main_stone_weight" all-clear placeholder="请输入" />
										</div>
										<span class="kd_right_text">ct</span>
									</div>
									<div class="flex align-center">
										<div class="kd_left">主石颜色</div>
										<div class="kd_right">{{ form.main_color_name || '' }}</div>
									</div>
									<div class="flex align-center">
										<div class="kd_left">主石净度</div>
										<div class="kd_right">{{ form.main_neatness_name || '' }}</div>
									</div>
									<div class="flex align-center">
										<div class="kd_left">主石切工</div>
										<div class="kd_right">{{ form.main_cut_name || '' }}</div>
									</div>
									<div class="flex align-center">
										<div class="kd_left">主石数量</div>
										<div class="kd_right flex1">
											<a-input type="number" class="kd_inp" all-clear placeholder="请输入"
												v-model:value="form.main_stone_num" />
										</div>
										<span class="kd_right_text">粒</span>
									</div>
									<div class="flex align-center">
										<div class="kd_left">副石石重</div>
										<div class="kd_right flex1">
											<a-input type="number" class="kd_inp" all-clear placeholder="请输入"
												v-model:value="form.vice_stone_weight" />
										</div>
										<span class="kd_right_text">ct</span>
									</div>
									<div class="flex align-center">
										<div class="kd_left">副石数量</div>
										<div class="kd_right flex1">
											<a-input type="number" class="kd_inp" all-clear placeholder="请输入"
												v-model:value="form.vice_stone_num" />
										</div>
										<span class="kd_right_text">粒</span>
									</div>
									<div class="flex align-center">
										<div class="kd_left">换购金价</div>
										<div class="kd_right flex1">
											<a-input type="number" class="kd_inp" all-clear placeholder="请输入"
												v-model:value="form.exchange_gold_price" />
										</div>
										<span class="kd_right_text">元</span>
									</div>
									<div class="flex align-center">
										<div class="kd_left">换购工费</div>
										<div class="kd_right flex1">
												<a-input-group compact>
													<a-select style="width:87px" v-model:value="form.exchange_labour_type">
												        <a-select-option value="1">按克</a-select-option>
												        <a-select-option value="2">按件</a-select-option>
												    </a-select>
												    <a-input type="number" class="kd_inp" all-clear v-model:value="form.exchange_labour" placeholder="请输入" style="width: 60%" />
												</a-input-group>
										</div>
										<span class="kd_right_text">元</span>
									</div>
									<div class="flex align-center">
										<div class="kd_left required">抵扣金额</div>
										<div class="kd_right flex1">
											<a-input type="number" class="kd_inp" all-clear placeholder="请输入"
												v-model:value="form.deduct_amount" />
										</div>
										<span class="kd_right_text">元</span>
									</div>
									<div class="flex align-center">
										<div class="kd_left">旧货标记</div>
										<div class="kd_right flex1 flex align-center">
											<a-select class="kd_inp flex1" optionFilterProp="label"
												:options="signOptions" allow-clear placeholder="请选择" v-model:value="form.junk_tag_code" />
										</div>
									</div>
									<div class="flex align-center">
										<div class="kd_left">旧货备注</div>
										<div class="kd_right flex1 flex align-center">
											<a-select class="kd_inp flex1" optionFilterProp="label"
												:options="signOptions" allow-clear placeholder="请选择" v-model:value="form.note"  />
										</div>
									</div>
									
								</div>
							</div>
						</div>
					</a-col>
				</a-row>
			</a-form>
		</div>
</template>

<script setup>
	import {ref,reactive,onMounted, watch} from 'vue';
	import {Modal,message,Form} from 'ant-design-vue';
	import dayjs from 'dayjs';
	import {uploadUrl} from '@/config/setting';
	import {emailReg,phoneReg,identityReg} from 'ele-admin-pro';
	import {PlusOutlined,LoadingOutlined} from '@ant-design/icons-vue';
	import {get_buy, get_buy_detail, junk_exchange} from '@/api/order/order/jewelry_order';
	import {get_list} from '@/api/setting/sales_subject';

	// 表格列配置
	const useForm = Form.useForm;

	const props = defineProps({
		// 弹窗是否打开
		visible: Boolean,
		member_id: [Number, String]
	});

	const emit = defineEmits(['done', 'update:visible']);

	const loading = ref(false);
	const tableData = ref([]);
	const signOptions = ref([]);

	const form = reactive({
		member_id: props.member_id,
		original_type:'1',
		retail_type:'1',
		goods_code:'',
		thumb:'',
		bar_code:'',
		gold_category_code:'',
		gold_category_code_name:'',
		subclass_code:'',
		subclass_code_name:'',
		quality_code:'',
		quality_code_name:'',
		gem_category_code:'',
		gem_category_name:'',
		classes_code:'',
		classes_name:'',
		name:'',
		num:'',
		gold_weight_old:'',
		gold_weight:'',
		piece_weight:'',
		real_quality:'',
		lumping_weight:'',
		sticker_price:'',
		real_amount:'',
		main_stone_weight:'',
		main_stone_color:'',
		main_color_name:'',
		main_stone_neatness:'',
		main_neatness_name:'',
		main_stone_cut:'',
		main_cut_name:'',
		main_stone_num:'',
		vice_stone_weight:'',
		vice_stone_num:'',
		exchange_gold_price:'',
		exchange_labour_type:'1',
		exchange_labour:'',
		deduct_amount:'',
		junk_tag_code:'',
		note:'',
	});
	
	watch(
		() => [
			form.lumping_weight,
			form.exchange_gold_price,
			form.exchange_labour_type,
			form.exchange_labour
		],
		(newValue, oldValue) => {
			console.log('newValue===', newValue);
			//抵扣金额：折足重✖换购金价-换购工费（工费按克：换购工费×折足重，工费按件：直接减工费）
			if(form.exchange_labour_type == 1){
				form.deduct_amount = Number(form.lumping_weight) * Number(form.exchange_gold_price) - Number(form.exchange_labour) *  Number(form.lumping_weight);
			}else if(form.exchange_labour_type == 2){
				form.deduct_amount = Number(form.lumping_weight) * Number(form.exchange_gold_price) - Number(form.exchange_labour);
			}
		}
	);

	onMounted(() => {
		get_buy({member_id: 13}).then((res) => {
			tableData.value = res.data;
		}).catch((e) => {
			message.error(e);
		});
		get_list({
			page: 1,
			page_size: 99999,
			filters: {
				type: 'sales'
			}
		}).then((res) => {
				res.list.forEach((item) => {
					signOptions.value.push({
						label: item.name,
						value: item.code
					});
				});
			}
		);
	});
	
	const changeW = (e)=>{
		console.log(e);
		form.lumping_weight = form.gold_weight * (form.real_quality/100)
	}
	const search = ()=>{
		get_buy_detail({
			member_id: 13,
			bar_code: form.bar_code
		}).then(res=>{
			console.log(res);
			Object.keys(form).forEach(key=>{
				form[key] = res[key] ? res[key] : null;
			})
			form.gold_weight_old = res.gold_weight;
			form.exchange_labour_type = '1';
		})
	}
	const save = ()=>{
		console.log(form);
		junk_exchange(form).then(res=>{
			//updateVisible(false);
			message.success(res.msg);
		}).catch(e=>{
			message.error(e);
		})
	}

</script>
<style scoped></style>